import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { Search24 as SearchIcon } from '@carbon/icons-react';
import { withRouter } from 'react-router';
import Select, { Option } from '@kuiper-components/select';
import Input from '@kuiper-components/input';
import s from './style.module.css';
import Download from '../Download';
import Button from '@knownsec/react-component/dist/Button';
import Message from '@knownsec/react-component/dist/Message';
const optionsVal = Object.entries({
	normal: '等待中',
	pending: '进行中',
	success: '成功',
	error: '失败',
});
function Toolbox({ className, value, reSearch }) {
	const [asset, setAsset] = React.useState(value.asset || undefined);
	const [status, setStatus] = React.useState(value.status || undefined);
	const handleSelectCommit = val => {
		setStatus(val);
		if (val)
			reSearch({
				asset,
				status: val,
			});
	};
	const getSearchData = () => {
		if (asset)
			reSearch({
				asset,
				status,
			});
	};
	const handleReset = () => {
		reSearch({
			asset: '',
			status: '',
		});
		setStatus(undefined);
		setAsset(undefined);
	};
	const downBack = () => {
		Message.show({
			type: 'success',
			message: `报告正在导出，请稍后`,
			placement: 'top',
		});
		reSearch();
	};
	return (
		<div className={cn(className, s.toolbox)}>
			<Download className={s.btn} downBack={downBack} />
			<div className={s.selectContainer}>
				<Select
					placeholder="状态"
					className={s.item}
					value={status}
					onChange={handleSelectCommit}
				>
					{optionsVal.map(([key, val]) => (
						<Option key={key} value={key}>
							{val}
						</Option>
					))}
				</Select>
				<Input
					onChange={e => {
						setAsset(e);
					}}
					className={s.input}
					placeholder="请输入资产地址"
					after={<SearchIcon className={s.icon} onClick={getSearchData} />}
					value={asset}
					onPressEnter={getSearchData}
				/>
				<Button
					className={s.reset}
					onClick={() => {
						handleReset();
					}}
				>
					重置
				</Button>
			</div>
		</div>
	);
}

Toolbox.propTypes = {
	className: PropTypes.string,
	value: PropTypes.object,
	reSearch: PropTypes.func.isRequired,
};
Toolbox.defaultProps = {
	className: '',
};

export default withRouter(Toolbox);
